/******************************************************************************
* File description: MaintenanceJiaReKuai2QuXianTable.qml
* Function: 维护-加热块：升降温曲线校准表格
* Current Version: 1.0.0
* Author: 张宇轩
* Date: 2024-08-29
*  -----
*  Copyright by 博坤生物 .
 *****************************************************************************/
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
import Qt.labs.qmlmodels 1.0

Item {
    id: root

    /* property 定义开始 */
    property int plateRowCount: 12 // 反应板行数
    property int plateColCount: 8 // 反应板列数
    // 横向表头数组
    property var horHeaderList: ["斜率K", "温度1", "K1", "K2", "温度2", "P", "I", "D"]
    // 纵向表头数组
    property var verHeaderList: []
    // 横向表头高
    property int horizontalHeaderHeight: 40
    // 纵向表头宽
    property int verticalHeaderWidth: 90
    // 左上角角落
    property string cornerColor: "#FFEBF3FF"
    property int cornerBorderWidth: 0
    property string cornerBorderColor: "transparent"
    // 表格数据
    property var tableModels: []

    // private
    property int _itemIndex: 0 // 记录每个代理对象的下表，反推出所在行列
    property var _startPoint: [-1, -1] // 记录起点坐标
    property var _endPoint: [-1, -1] // 记录终点坐标
    property bool _isPressed: false // 鼠标按下信号
    property int _curMouseRow: -1 // 鼠标当前所在行
    property int _curMouseCol: -1 // 鼠标当前所在列
    property var _tableModel: root.tableModels

    // 信号
    signal pressedIndex(int index) // 发送表格下标信号

    // 函数
    // 下标转行列
    function index2RowCol(index){
        return [parseInt(index / plateColCount), index % plateColCount]
    }

    // 行列转下标
    function rowCol2Index(row, col){
        return row * plateColCount + col
    }

    // 生成纵向表头
    function createVerHeaderDataList(){
        var alphaBet = ["A", "B", "C", "D", "E", "F"]
        var verHeader = []
        for(let i = 0; i < alphaBet.length; i++) {
            verHeader.push(alphaBet[i] + "区升温")
            verHeader.push(alphaBet[i] + "区降温")
        }
        root.verHeaderList = verHeader
    }

    /* property 定义结束 */

    GLOBAL{id: global}

    Rectangle {
        id: table
        anchors.fill: parent
        color: "#FFEBF3FF"
        clip: true
        border.width: 1
        border.color: "transparent"

        // 横向表头
        Item {
            id: horizontalHeader
            width: parent.width - verticalHeader.width
            height: horizontalHeaderHeight
            anchors {
                top: parent.top
                left: parent.left
                leftMargin: verticalHeader.width
            }

            Row {
                spacing: 0

                Repeater {
                    model: root.horHeaderList

                    Rectangle {
                        width: horizontalHeader.width / plateColCount
                        height: horizontalHeader.height
                        color: "transparent"
                        border.width: 0

                        Text {
                            text: qsTr(modelData)
                            anchors.centerIn: parent
                            font.pixelSize: 16
                            font.family: "Alibaba PuHuiTi"
                            color: "#FF222222"
                        }

                        Component.onCompleted: {
                            // 画边框
                            global.createLeftBorder(this, 2, "#FFCCCCCC")
                            global.createTopBorder(this, 2, "#FFCCCCCC")
                        }
                    }
                }
            }
        }

        // 纵向表头
        Item {
            id: verticalHeader
            width: verticalHeaderWidth
            height: parent.height - horizontalHeader.height
            anchors {
                top: parent.top
                left: parent.left
                topMargin: horizontalHeaderHeight
            }

            Column {
                spacing: 0

                Repeater {
                    model: root.verHeaderList

                    Rectangle {
                        width: verticalHeader.width
                        height: verticalHeader.height / plateRowCount
                        color: index % 2 !== 0 ? "transparent" : "#FFFFEBEB"
                        border.width: 0

                        Text {
                            text: qsTr(modelData)
                            anchors.centerIn: parent
                            font.pixelSize: 16
                            font.family: "Alibaba PuHuiTi"
                            color: "#FF222222"
                        }

                        Component.onCompleted: {
                            // 画上边框
                            global.createTopBorder(this, 2, "#FFCCCCCC")
                            // 结尾画下边框
                            global.createBottomBorder(this, 2, "#FFCCCCCC", index === root.plateRowCount-1)
                        }
                    }
                }
            }

            Component.onCompleted: {
                // 设置表头
                root.createVerHeaderDataList()
            }
        }

        // 左上角
        Rectangle {
            id: leftTopCorner
            width: verticalHeader.width
            height: horizontalHeader.height
            anchors {
                top: parent.top
                left: parent.left
                right: horizontalHeader.left
                bottom: verticalHeader.top
            }
            color: root.cornerColor
            border.width: root.cornerBorderWidth
            border.color: root.cornerBorderColor

            // 文字
            Label {
                id: leftTopCornerText
                anchors.centerIn: parent
                font.pixelSize: 16
                color: "#FF222222"
                text: "升降温"
            }

            // 绘制框线
            Component.onCompleted: {
                global.createTopBorder(this, 2, "#FFCCCCCC")
            }
        }

        // 表格内容
        TableView {
            id: tableContent
            width: horizontalHeader.width
            height: verticalHeader.height
            anchors {
                top: parent.top
                left: parent.left
                topMargin: horizontalHeader.height
                leftMargin: verticalHeader.width
            }
            clip: true
            boundsBehavior: Flickable.StopAtBounds
            columnSpacing: 0
            rowSpacing: 0

            columnWidthProvider: function(column){
                return tableContent.width / plateColCount
            }

            rowHeightProvider: function(row){
                return tableContent.height / plateRowCount
            }

            onWidthChanged: {
                forceLayout() // 强制重新布局刷新视图
            }

            onHeightChanged: {
                forceLayout() // 强制重新布局刷新视图
            }

            model: TableModel {
                id: tableModel

                TableModelColumn {display: "斜率K"}
                TableModelColumn {display: "温度1"}
                TableModelColumn {display: "K1"}
                TableModelColumn {display: "K2"}
                TableModelColumn {display: "温度2"}
                TableModelColumn {display: "P"}
                TableModelColumn {display: "I"}
                TableModelColumn {display: "D"}

                rows: root._tableModel
            }

            delegate: Rectangle{
                id: tableDelegate

                // 保存变量
                property int curRow: row
                property int curCol: column
                // 边框
                property QtObject leftBorder: null
                property QtObject topBorder: null
                property QtObject bottomBorder: null

                implicitWidth: tableContent.columnWidthProvider(column)
                implicitHeight: tableContent.rowHeightProvider(row)
                color: row % 2 !== 0 ? "transparent" : "#FFFFEBEB"

                Component.onCompleted: {
                    // 边框
                    tableDelegate.leftBorder = global.createLeftBorder(this, 2, "#FFCCCCCC")
                    tableDelegate.topBorder = global.createTopBorder(this, 2, "#FFCCCCCC")
                    tableDelegate.bottomBorder = global.createBottomBorder(this, 2, "#FFCCCCCC", row === root.plateRowCount-1)
                }

                // 槽函数
                Connections {
                    target: root
                    // 点击表格事件

                    // function onPressedIndex(index){
                    //     var [posRow, posCol] = root.index2RowCol(index)
                    //     // 设置起始下标和结束下标
                    //     var startRowIndex = Math.min(posRow, root._startPoint[0])
                    //     var endRowIndex = Math.max(posRow, root._startPoint[0])
                    //     var startColIndex = Math.min(posCol, root._startPoint[1])
                    //     var endColIndex = Math.max(posCol, root._startPoint[1])
                    //     // 各个边框颜色
                    //     var leftBorderColor = tableDelegate.leftBorder.color
                    //     var topBorderColor = tableDelegate.topBorder.color
                    //     var bottomBorderColor = tableDelegate.bottomBorder.color
                    //     // 背景颜色
                    //     var bgColor = tableDelegate.color

                    //     // 背景
                    //     if(tableDelegate.curRow >= startRowIndex && tableDelegate.curRow <= endRowIndex &&
                    //             tableDelegate.curCol >= startColIndex && tableDelegate.curCol <= endColIndex) {
                    //         // 颜色不同则渲染
                    //         if(bgColor !== "#1A2F42CD") tableDelegate.color = "#1A2F42CD"
                    //     }else {
                    //         // 颜色不同则渲染
                    //         if(bgColor != "transparent") tableDelegate.color = "transparent"
                    //     }

                    //     // 边框
                    //     // 上边框
                    //     if(tableDelegate.curRow === startRowIndex &&
                    //             tableDelegate.curCol >= startColIndex && tableDelegate.curCol <= endColIndex){
                    //         // 修改颜色
                    //         tableDelegate.topBorder.color = "#FF2F42CD"
                    //     }else {
                    //         tableDelegate.topBorder.color = "#FFCCCCCC"
                    //     }
                    //     // 左边框
                    //     if(tableDelegate.curCol === startColIndex &&
                    //             tableDelegate.curRow >= startRowIndex && tableDelegate.curRow <= endRowIndex){
                    //         // 修改颜色
                    //         tableDelegate.leftBorder.color = "#FF2F42CD"
                    //     }else {
                    //         tableDelegate.leftBorder.color = "#FFCCCCCC"
                    //     }
                    //     // 右边框
                    //     // 判断不为左边框
                    //     if(tableDelegate.curCol !== startColIndex) {
                    //         // 右一个表格的左边框
                    //         if(tableDelegate.curCol === endColIndex+1 &&
                    //                 tableDelegate.curRow >= startRowIndex && tableDelegate.curRow <= endRowIndex){
                    //             // 修改颜色
                    //             tableDelegate.leftBorder.color = "#FF2F42CD"
                    //         }else {
                    //             tableDelegate.leftBorder.color = "#FFCCCCCC"
                    //         }
                    //     }
                    //     // 下边框
                    //     // 判断不为上边框
                    //     if(tableDelegate.curRow !== startRowIndex) {
                    //         // 下一个表格的上边框
                    //         if(tableDelegate.curRow === endRowIndex+1 &&
                    //                 tableDelegate.curCol >= startColIndex && tableDelegate.curCol <= endColIndex){
                    //             // 修改颜色
                    //             tableDelegate.topBorder.color = "#FF2F42CD"
                    //         }else {
                    //             tableDelegate.topBorder.color = "#FFCCCCCC"
                    //         }
                    //     }
                    //     // 真正的下边框（只有最后一行元素存在）
                    //     if(tableDelegate.curRow === endRowIndex &&
                    //             tableDelegate.curCol >= startColIndex && tableDelegate.curCol <= endColIndex) {
                    //         // 修改颜色
                    //         tableDelegate.bottomBorder.color = "#FF2F42CD"
                    //     }else {
                    //         tableDelegate.bottomBorder.color = "#FFCCCCCC"
                    //     }

                    //     // 重新绘制边框
                    //     // 颜色不同则渲染
                    //     if(leftBorderColor !== tableDelegate.leftBorder.color) tableDelegate.leftBorder.requestPaint()
                    //     if(topBorderColor !== tableDelegate.topBorder.color) tableDelegate.topBorder.requestPaint()
                    //     if(bottomBorderColor !== tableDelegate.bottomBorder.color) tableDelegate.bottomBorder.requestPaint()
                    // }

                }
            }

            MouseArea {
                anchors.fill: parent
                hoverEnabled: true
            //     onPressed: {
            //         var mouseX = mouse.x
            //         var mouseY = mouse.y
            //         // 边界判断
            //         if(mouseX >= parent.width) mouseX = parent.width - 1
            //         if(mouseY >= parent.height) mouseY = parent.height - 1
            //         if(mouseX < 0) mouseX = 0
            //         if(mouseY < 0) mouseY = 0
            //         // 设置值
            //         _curMouseRow = parseInt(mouseY / tableContent.rowHeightProvider(0)) > plateRowCount ?
            //                     plateRowCount : parseInt(mouseY / tableContent.rowHeightProvider(0))
            //         _curMouseCol = parseInt(mouseX / tableContent.columnWidthProvider(0)) > plateColCount ?
            //                     plateColCount : parseInt(mouseX / tableContent.columnWidthProvider(0))
            //         _startPoint = [_curMouseRow, _curMouseCol]
            //         root.pressedIndex(rowCol2Index(_curMouseRow, _curMouseCol))
            //         _isPressed = true
            //     }
            //     onPositionChanged: {
            //         if(_isPressed){
            //             var mouseX = mouse.x
            //             var mouseY = mouse.y
            //             // 边界判断
            //             if(mouseX >= parent.width) mouseX = parent.width - 1
            //             if(mouseY >= parent.height) mouseY = parent.height - 1
            //             if(mouseX < 0) mouseX = 0
            //             if(mouseY < 0) mouseY = 0
            //             // 设置值
            //             _curMouseRow = parseInt(mouseY / tableContent.rowHeightProvider(0)) > plateRowCount ?
            //                         plateRowCount : parseInt(mouseY / tableContent.rowHeightProvider(0))
            //             _curMouseCol = parseInt(mouseX / tableContent.columnWidthProvider(0)) > plateColCount ?
            //                         plateColCount : parseInt(mouseX / tableContent.columnWidthProvider(0))
            //             root.pressedIndex(rowCol2Index(_curMouseRow, _curMouseCol))


            //             console.log(root.pressedIndex(rowCol2Index(_curMouseRow, _curMouseCol)), _curMouseRow, _curMouseCol)
            //         }
            //     }
            //     onReleased: {
            //         var mouseX = mouse.x
            //         var mouseY = mouse.y
            //         // 边界判断
            //         if(mouseX >= parent.width) mouseX = parent.width - 1
            //         if(mouseY >= parent.height) mouseY = parent.height - 1
            //         if(mouseX < 0) mouseX = 0
            //         if(mouseY < 0) mouseY = 0
            //         // 设置值
            //         _curMouseRow = parseInt(mouseY / tableContent.rowHeightProvider(0)) > plateRowCount ?
            //                     plateRowCount : parseInt(mouseY / tableContent.rowHeightProvider(0))
            //         _curMouseCol = parseInt(mouseX / tableContent.columnWidthProvider(0)) > plateColCount ?
            //                     plateColCount : parseInt(mouseX / tableContent.columnWidthProvider(0))
            //         _endPoint = [_curMouseRow, _curMouseCol]
            //         _isPressed = false
            //     }

            }

            Component.onCompleted: {
                root.tableModels = [
                            {"A": "", "B": "", "C": "", "D": "", "E": "", "F": "", "G": "", "H": ""},
                            {"A": "", "B": "", "C": "", "D": "", "E": "", "F": "", "G": "", "H": ""},
                            {"A": "", "B": "", "C": "", "D": "", "E": "", "F": "", "G": "", "H": ""},
                            {"A": "", "B": "", "C": "", "D": "", "E": "", "F": "", "G": "", "H": ""},
                            {"A": "", "B": "", "C": "", "D": "", "E": "", "F": "", "G": "", "H": ""},
                            {"A": "", "B": "", "C": "", "D": "", "E": "", "F": "", "G": "", "H": ""},
                            {"A": "", "B": "", "C": "", "D": "", "E": "", "F": "", "G": "", "H": ""},
                            {"A": "", "B": "", "C": "", "D": "", "E": "", "F": "", "G": "", "H": ""},
                            {"A": "", "B": "", "C": "", "D": "", "E": "", "F": "", "G": "", "H": ""},
                            {"A": "", "B": "", "C": "", "D": "", "E": "", "F": "", "G": "", "H": ""},
                            {"A": "", "B": "", "C": "", "D": "", "E": "", "F": "", "G": "", "H": ""},
                            {"A": "", "B": "", "C": "", "D": "", "E": "", "F": "", "G": "", "H": ""}
                        ]
            }
        }
    }
}
